<template>
  <div>
    <!-- 
        自定义指令
            可以像vue的指令一样进行一些快速的逻辑的封装与使用

            Vue.drective
            {
                drectives:{}
            }
     -->
    <input type="text" v-focus />

    <h1 v-my-show="show">你好</h1>
    <div>{{ show.toString() }}</div>
    <button @click="show = !show">切换显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    clickFn() {
      console.log("点击事件");
    },
  },
  directives: {
    /*
        目标： 模仿一个 v-show
            作用： 当 指令的值是 true ，显示 元素，否则隐藏
        思路：
            1. 当值是true/false  --  得到指令的值  --- binding参数
            2. 需要对元素进行显示隐藏 --- 需要有元素 -- inserted里面进行显示和隐藏
            3. 如何显示隐藏     --- display
            4. 当值更新的时候，也能控制显示隐藏  ---  在updated或者componentUpdated里面得到最新的值，控制显示隐藏
    */
    "my-show": {
      // 需要有元素才能显示隐藏，在inserted里面获取
      inserted(el, binding) {
        // 需要从binding里面得到v-my-show的值
        // console.log(binding.value);
        // 参数el就是我们想要操作的元素
        el.style.display = binding.value ? "block" : "none";
      },
      update(el, binding) {
        el.style.display = binding.value ? "block" : "none";
      },
    },
  },
};
</script>
